import React from 'react';
import './Person.css'; // 我们将创建新的CSS文件
import { SetOutline, TruckOutline, PayCircleOutline, EnvironmentOutline, BankcardOutline, AppstoreOutline, UnorderedListOutline } from 'antd-mobile-icons';
import Shu from '../../components/Shu';
import { useNavigate } from 'react-router-dom'
const JingdongStylePage = () => {
  const imageUrl = "https://p0.ssl.qhimgs1.com/sdr/400__/t01c691a327bbdd9b86.jpg"; // 京东logo
  const nav = useNavigate()
  const quan = () => {
    nav("/ding/qding")
  }
  const fa = () => {
    nav("/ding/df")
  }
  const shou = () => {
    nav("/ding/dais")
  }
   const tui = () => {
    nav("/ding/tui")
  }
   const di = () => {
    nav("/di")
  }
   const gou = () => {
    nav("/gou")
  }
  return (
    <div className="jd-container">
      {/* 京东风格头部 */}
      <header className="jd-header">
        <div className="jd-header-content">
          <div className="jd-logo-container">
            <img
              src={imageUrl}
              className="jd-logo"
            />
            <h1 className="jd-title">头像</h1>
          </div>
          <div className="jd-actions">
            <button className="jd-setting-btn"><SetOutline fontSize={18} /> 设置</button>
          </div>
        </div>
      </header>

      {/* 订单状态区域 */}
      <section className="jd-order-section">
        <div className="jd-order-header">
          <h3 className="jd-section-title">我的订单</h3>
          <span className="jd-view-all">查看全部 &gt;</span>
        </div>
        <div className="jd-order-grid">
          <div className="jd-order-item">
            <div className="jd-order-icon"><AppstoreOutline fontSize={20} onClick={quan} /></div>
            <div className="jd-order-text">全部</div>
          </div>
          <div className="jd-order-item">
            <div className="jd-order-icon"><BankcardOutline fontSize={20} onClick={fa}/></div>
            <div className="jd-order-text">待发货</div>
          </div>
          <div className="jd-order-item">
            <div className="jd-order-icon"><TruckOutline fontSize={20} onClick={shou}/></div>
            <div className="jd-order-text">待收货</div>
          </div>
          <div className="jd-order-item">
            <div className="jd-order-icon"><PayCircleOutline fontSize={20} onClick={tui}/></div>
            <div className="jd-order-text">退款/售后</div>
          </div>
          <div className="jd-order-item">
            <div className="jd-order-icon"><EnvironmentOutline fontSize={20} onClick={di}/></div>
            <div className="jd-order-text">地址管理</div>
          </div>
          <div className="jd-order-item">
            <div className="jd-order-icon"><UnorderedListOutline fontSize={20} onClick={gou}/></div>
            <div className="jd-order-text">购物车</div>
          </div>
        </div>
      </section>

      {/* 商品列表 */}
      <Shu />
    </div>
  );
};

export default JingdongStylePage;